<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: CPI与酒店月均价
-->
<template>
  <com-box :title="BarState.title">
    <template #titleRight>
      <div class="menu-box" v-if="BarState.curMenuName">
        <div class="menu-item" @click="handleMenuClick">
          <div class="mItem-text">{{ BarState.curMenuName }}</div>
          <div class="mItem-arrow">
            <img
              :class="BarState.isMenuShow ? 'mItem-arrow-img' : ''"
              src="~@/assets/images/arrow.png"
              alt=""
            />
          </div>
        </div>
        <div
          class="menu-window"
          v-show="BarState.isMenuShow"
          @mouseleave="handleMenuMouseleave"
        >
          <div class="window-box">
            <div
              @click="handleMenuChange(item)"
              class="menu-window-item"
              v-for="item in BarState.menuList"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #titleLeft>
      <div class="header-left header-box">{{ BarState.unit }}</div>
    </template>
    <div class="nav">
      <div class="box-bar echart-item">
        <charts :params="BarState.params"></charts>
      </div>
    </div>
  </com-box>
</template>
<script lang="ts" setup>
import comBox from '@/components/comBox/comBox.vue'
import { reactive, defineExpose } from 'vue'
import httpRequest from '@/service'
//折线图
const BarState: any = reactive({
  title: '',
  unit: '',
  isMenuShow: false,
  curMenuId: '',
  curMenuName: '',
  menuList: [],
  params: {
    height: '379px',
    loading: true,
    forceRedraw: true, // 强制重绘
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      legend: {
        show: true,
        right: 0,
        top: 20,
        itemWidth: 15,
        width: '100%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [{}],
      yAxis: [
        {
          splitLine: {
            show: false
          },
          name: [''],
          nameLocation: 'end'
        }
      ],
      grid: {
        top: 60,
        bottom: 49,
        left: 0,
        right: 0
      },
      dataZoom: [
        {
          show: true,
          type: 'slider',
          start: 0,
          end: 100,
          width: '96%',
          left: '3%',
          bottom: 22,
          height: 15,
          borderColor: '#166beb',
          handleStyle: {
            color: '#166beb',
            borderColor: '#166beb',
            borderWidth: 4
          },
          moveHandleSize: 10,
          moveHandleStyle: {
            color: '#166beb'
          },
          textStyle: {
            color: '#00c6ff'
          },
          emphasis: {
            handleStyle: {
              color: '#00c6ff',
              borderColor: '#00c6ff',
              borderWidth: 4
            },
            moveHandleStyle: {
              color: '#00c6ff'
            }
          }
        }
      ],
      series: [
        {
          type: ['line', 'line', 'line', 'line', 'line', 'line'],
          label: {
            show: false
          },
          itemStyle: {
            color: ['#00AFFB', '#FAA51D', '#ec6941', '#B45AF3', '#31FDFF']
          },
          areaStyle: {
            opacity: 0
          },
          connectNulls: true
        }
      ]
    }
  },
  getData: () => {
    BarState.params.loading = true
    httpRequest
      .get({ url: 'M2P3JqcyLine', params: { menuId: BarState.curMenuId } })
      .then((res) => {
        if (res.code == 200) {
          const { curMenuId, data, map, menu, unit, title } = res
          menu && (BarState.menuList = menu)
          title && (BarState.title = title)
          BarState.unit = unit ? `单位：${unit}` : ''
          if (curMenuId) {
            BarState.curMenuId = curMenuId
            BarState.curMenuName = menu.find(
              (item: any) => item.id == curMenuId
            ).name
          }
          if (Object.keys(map).length > 0) {
            BarState.params.options.dataset.dimensions = [
              'name',
              ...Object.keys(res.map)
            ]
            let dataList: any = []
            res.data.forEach((item: any) => {
              item.value1 && dataList.push(item.value1)
              item.value2 && dataList.push(item.value2)
              item.value3 && dataList.push(item.value3)
              item.value4 && dataList.push(item.value4)
              item.value5 && dataList.push(item.value5)
            })
            dataList = dataList.filter((item: any) => Number(item) > 0)
            const dataMin = Math.min(...dataList)
            BarState.params.options.dataset.source = data.map((item: any) => {
              for (const key in item) {
                if (['0', 0, '', null, 'null'].includes(item[key])) {
                  item[key] = '-'
                }
              }
              return item
            })
            BarState.params.options.yAxis[0].min =
              dataMin - 10 > 0
                ? (dataMin - 10).toFixed(0)
                : dataMin - 1 > 0
                ? (dataMin - 1).toFixed(0)
                : dataMin.toFixed(0)
            BarState.params.options.yAxis[0].name = ['']
            // BarState.params.options.title.text = res.title
            BarState.params.map = map
            BarState.params.loading = false
          }
        }
      })
  }
})
BarState.getData()

const handleMenuClick = () => {
  BarState.isMenuShow = true
}
const handleMenuMouseleave = () => {
  BarState.isMenuShow = false
}
const handleMenuChange = (item: any) => {
  BarState.curMenuId = item.id
  BarState.curMenuName = item.name
  BarState.isMenuShow = false
  BarState.getData()
}
const refreshData = () => {
  BarState.getData()
}
defineExpose({
  refreshData
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  .echart-item {
    width: 100%;
  }
  .box-bar {
    height: 100%;
    padding: 0px 30px 7px 15px;
  }
}
.menu-box {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  top: 20px;
  left: -17px;
  .menu-item {
    height: 40px;
    width: 140px;
    background: url('../img/menu_bg.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .mItem-text {
      font-size: 16px;
      color: #fff;
    }
    .mItem-arrow {
      font-size: 14px;
      color: #fff;
      img {
        transition: all 0.2s;
        height: 22px;
        position: relative;
        top: 3px;
      }
      .mItem-arrow-img {
        transform: rotate(180deg);
      }
    }
  }
  .menu-window {
    padding-top: 47px;
    position: absolute;
    top: -1px;

    .window-box {
      width: 140px;
      height: max-content;
      border: 1px solid #0f4fd9;
      box-shadow: 0px 0px 13px #089bcd inset;
      background-color: #163080;
      padding: 10px;
      .menu-window-item {
        cursor: pointer;
        font-size: 17px;
        color: #dedede;
        margin: 5px 0;
        &:hover {
          color: #2db3e4;
        }
      }
    }
  }
}
</style>
